<template>
    <div id="app">
        <mescroll-vue ref="mescroll"
                      :down="mescrollDown"
                      :up="mescrollUp"
                      @init="mescrollInit">
            <!--<div class="waterfall">
                <div class="item" v-for="i in dataList">
                    <div :style="{height:`${100+300*Math.random()}px`}">
                        {{i}}
                    </div>
                </div>
            </div>
            <span>完了</span>-->
            <div class="container">
                <div ref="BoxLeft">
                    <div v-for="(item,i) in leftList" :style="{height:`${100+300*item.height}px`}">
                        {{item}}
                    </div>
                </div>

                <div ref="BoxRight">
                    <div v-for="(item,i) in rightList" :style="{height:`${100+300*item.height}px`}">
                        {{item}}
                    </div>

                </div>
            </div>
        </mescroll-vue>
    </div>
</template>

<script>
    import MescrollVue from 'mescroll.js/mescroll.vue'

    export default {
        name: 'app',
        components: {
            MescrollVue
        },
        data() {
            return {
                leftList: [],
                rightList: [],
                mescroll: null, // mescroll实例对象
                mescrollDown: {
                    callback: this.getData,
                    offset: 100
                },
                mescrollUp: {
                    use: false
                }
            }
        },
        methods: {
            mescrollInit(mescroll) {
                this.mescroll = mescroll
            },
            getData(mescroll) {
                /*let dataList = [...Array(20).keys()];
                const newList = [].concat(...(Array.from(dataList.reduce((total, cur, index) => {
                    total[index % 2].push(cur);
                    return total
                }, { 0: [], 1: [], length: 2 }))));
                this.dataList = newList;
                console.log(newList)*/
                // let i = 0;
                let dataList = [...Array(20).keys()];

                let appendList = (i) => {
                    let item = {
                        i,
                        height: Math.random()
                    };
                    if (i >= dataList.length) return;
                    let leftHeight = this.$refs.BoxLeft.offsetHeight,
                        rightHeight = this.$refs.BoxRight.offsetHeight;

                    if (leftHeight < rightHeight || leftHeight === rightHeight) {
                        console.log(i, leftHeight, rightHeight, 'left');
                        this.leftList.push(item)
                    } else {
                        console.log(i, leftHeight, rightHeight, 'right');
                        this.rightList.push(item)
                    }
                    this.$nextTick(() => {
                        i += 1;
                        appendList(i)

                    })
                };
                appendList(0);
                mescroll.endSuccess()
            },
        }
    }
</script>

<style lang="less">
    body {
        margin: 0;
    }

    #app {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0 auto;
        border: 1px solid #000;
        box-sizing: border-box;

        .container {
            width: 100%;
            padding: 200px 0;
            box-sizing: border-box;
            overflow: auto;

            & > div {
                width: 50%;
                float: left;
                height: auto;
                /*border: 1px solid rebeccapurple;*/
                box-sizing: border-box;

                & > div {
                    border: 1px solid red;
                }
            }
        }

        .waterfall {
            width: 100%;
            column-count: 2;
            column-gap: 10px;
            height: auto;
        }

        .item {
            break-inside: avoid;
            border: 1px solid rebeccapurple;
            /*margin-bottom: 10px;*/
        }
    }
</style>
